<!-- 产线设置 -->
<template>
  <div class="aisle-header">
    <el-button type="primary" @click="addAisle">添加产线</el-button>
    <el-popconfirm
      title="确定要全部删除吗？"
      @confirm="RemoveAisle(Equipmentid)"
    >
      <template #reference>
        <el-button type="danger" :loading="removeLoading" :disabled="disabled"
          >一键删除</el-button
        >
      </template>
    </el-popconfirm>
  </div>
  <el-table
    :data="tableData"
    style="width: 100%"
    v-loading="loading"
    border
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column type="index" label="序号" width="80" align="center" />
    <el-table-column
      prop="aisleName"
      label="产线名称"
      width="120"
      align="center"
    />
    <el-table-column prop="aisleNumber" label="产线编号" align="center" />
    <el-table-column prop="deviceName" label="设备名称" align="center" />
    <el-table-column
      prop="lastUpdateTime"
      label="最后更新时间"
      align="center"
    />
    <el-table-column fixed="right" label="操作" width="150" align="center">
      <template #default="scope">
        <!-- 修改 -->
        <el-button
          type="primary"
          :icon="Edit"
          circle
          @click="showDrawerClick(scope.row)"
        ></el-button>
        <!-- 删除 -->
        <el-popconfirm title="确定要删除吗？" @confirm="RemoveAisle(scope.row)">
          <template #reference>
            <el-button
              type="danger"
              :loading="scope.row.loading"
              :icon="Delete"
              circle
            />
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <Drawer
    :showDrawer="showDrawer"
    @clickShow="clickShow"
    :amendEquipment="amendEquipment"
    :title="title"
  />
</template>

<script setup>
import { ref, watch, reactive } from 'vue'
import { aisleInfo, removeAisle } from '@/api/aisle'
import { Delete, Edit } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import Drawer from './components/Drawer'
const loading = ref(false)
// 获取所有选中的产线id
const Equipmentid = ref([])
const disabled = ref(true)
// 获取所有选中的当前行的数据
const handleSelectionChange = (val) => {
  if (val.length > 0) {
    disabled.value = false
  } else {
    disabled.value = true
  }
  console.log(val)
  Equipmentid.value = val
}
// 标题
const title = ref('')

// 抽屉的显示隐藏
const showDrawer = ref(false)

// 点击获取当前行
const amendEquipment = reactive({})

// 点击修改产线
const showDrawerClick = (scope) => {
  title.value = '更新产线'
  // 抽屉显示
  showDrawer.value = true
  // 传递点击当前行的数据
  Object.assign(amendEquipment, scope)
}

// 添加产线
const addAisle = () => {
  title.value = '添加产线'
  // 清空
  Object.keys(amendEquipment).forEach((key) => {
    if (key === 'aisleId') {
      amendEquipment[key] = null
    } else {
      amendEquipment[key] = ''
    }
  })
  // console.log(amendEquipment)
  showDrawer.value = true
}

// 子组件传递来的值
const clickShow = (val, data) => {
  showDrawer.value = val
  if (data) {
    getaisleInfo()
  }

  if (!val) {
    /**
     * 抽屉关闭的时候 子组件会传递个 fasle 来
     * 这里接收到传递来的值 就清空数据
     * 这样做的目的：当再次点击添加或者编辑的时候会 重新调用方法传递数据
     * 为了解决 子集 选择器 不展示 名称 而展示 id 的问题
     */
    Object.keys(amendEquipment).forEach((key) => {
      amendEquipment[key] = ''
    })
    console.log(amendEquipment)
  }
}

// 为了验证 showDrawer是否改变了 没其他作用  可随时删除
watch(
  () => showDrawer.value,
  (val) => {
    console.log(val)
  }
)

// 封装调用产线的接口产线信息显示
const tableData = ref([])
const getaisleInfo = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    aisleInfo().then((res) => {
      console.log(res)
      tableData.value = res.data.map((item) => {
        item.loading = false
        return item
      })
    })
  }, 300)
}
getaisleInfo()

// 这个是用在一键删除的  loading
const removeLoading = ref(false)
// 删除产线 和 一键删除
// 封装删除接口
const remove = (data) => {
  console.log(data)
  //  筛选数据 吧数据为 aisleId 的全部筛选出来并(返回)保存
  const aisleIds = data.map((item) => {
    return item.aisleId
  })
  removeAisle({ deviceId: aisleIds })
    .then((res) => {
      ElMessage({
        message: res.message,
        type: 'success'
      })
      getaisleInfo()
    })
    .catch((err) => {
      ElMessage({
        message: err.message,
        type: 'success'
      })
    })
}
const RemoveAisle = (tableData) => {
  // 判断是不是数组 如果是 则不变 如果不是则转换成数组
  if (tableData instanceof Array) {
    tableData = tableData
    removeLoading.value = true
    setTimeout(() => {
      removeLoading.value = false
      remove(tableData)
    }, 300)
  } else {
    tableData.loading = true
    setTimeout(() => {
      tableData.loading = false
      tableData = [tableData]
      remove(tableData)
    }, 300)
  }
}
</script>

<style scoped lang='scss'>
.aisle-header {
  margin-bottom: 2.5vh;
}
</style>
